<template>
  <div class="MyAddress">
<div class="MyAddress-header" style="display: flex; border: 3px solid #66CDAA ;border-radius: 10px; ">
<div style="margin-left: 100px; margin-top: 5px;">
  <img src="@/assets/logo.png" alt=""  style="width: 90px; margin-left: 40px;">
  <br>
  <span style="font-size: 24px; color: #66CDAA ;margin-left: 60px;">赣选</span>
</div>
<div style="line-height: 150px; ">
  <el-input   placeholder="瑞金咸鸭蛋" style="width: 200px;border: 3px solid  #66CDAA; border-radius: 5px; margin-left: 700px" />
  <el-button type="primary" style="background-color: #66CDAA;;" >搜索</el-button>

  <router-link to="/Shopping" target="_blank" style="">
 

<span>  <img src="@/assets/shopping.png" width="30" height="30" style="margin-left: 50px;" ></span>
</router-link>

</div>
</div>
<div class="MyAddress-banner">
  <div class="MyAddress-add" style="margin-top: 20px;margin-left: 50px;">
    <el-button  @click="dialogFormVisible=true" style="background-color: #66CDAA; color: white;" >新增收货地址</el-button>
    已创建地址{{addressinformation.length}}个,最多25个
    默认地址：{{MoRenaddress}}
  </div>
  <div class="MyAddress-form" v-for="(item,index) in addressinformation" :key="index">
    <ul>
      <li>收件人：{{item.addressee }}</li>
      <li>详细地址：{{item.addressname }}</li>
      <li>电话号码：{{item.phone }}</li>
    </ul>
    <div style="margin-left: 900px;margin-top: 60px;">
      <el-button style="background-color: #66CDAA; color: white;" @click="setMoRenaddress(index)"> 设置为默认地址</el-button>
  <el-button style="background-color: #66CDAA; color: white;" @click="remove(index)"> 删除</el-button>
  <el-button style="background-color: #66CDAA; color: white;"  @click="edit(index)"> 编辑</el-button>
    </div>
  </div>
</div>
<!-- 收集信息弹框 -->
<el-dialog v-model="dialogFormVisible" title="Shipping address">
    <el-form :model="form" >
      <el-form-item label="收件人姓名:" label-width="auto" style="width: 400px;">
        <el-input v-model="form.addressee" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详细地址：" label-width="auto" >
        <el-input v-model="form.addressname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号码：" label-width="auto" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="formConfirm">
        确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 编辑的信息框 -->
  <el-dialog v-model="editFormVisible" title="Shipping address">
    <el-form :model="form" >
      <el-form-item label="收件人姓名:" label-width="auto" style="width: 400px;">
        <el-input v-model="form.addressee" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详细地址：" label-width="auto" >
        <el-input v-model="form.addressname" autocomplete="off" />
      </el-form-item>
      <el-form-item label="手机号码：" label-width="auto" >
        <el-input v-model="form.phone" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click="formEdit">
        确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script>
import { useUserStore } from '@/stores/user';
import axios from '@/utils/request';
export default {
name:'MyAddress',
data() {
  return {
    editindex:'',
    dialogFormVisible:false,
    editFormVisible:false,
    form:{
      addressee:'',
      addressname:'',
      phone:'',
    },
    addressinformation:[],
    MoRenaddress:'',
    length:''
  }
},
methods:{
  formConfirm(){
    const user=useUserStore()
    this.dialogFormVisible = false
    if(this.form.addressee&&this.form.phone&&this.form.addressname)
   { this.addressinformation.push(this.form)}
   const parmas={
    addressee:this.form.addressee,
    addressname:this.form.addressname,
    phone:this.form.phone,
    id:0,
    status:0,
    userid:user.userInfo.userinformation.id
   }
   axios.post('/address/insert',JSON.stringify(parmas)).then(res=>{
   if(res.code===200) {
        console.log('请求成功');
      }

   }
   )
    this.form={}
  },
  edit(index){
    this.editFormVisible=true
    this.form=this.addressinformation[index]
    this.editindex=index
    // console.log(this.information[index]);
  },
  formEdit(){
    const user=useUserStore()
this.editFormVisible=false
const parmas={
    addressee:this.form.addressee,
    addressname:this.form.addressname,
    phone:this.form.phone,
    id:this.addressinformation[this.editindex].id,
    status:this.addressinformation[this.editindex].status,
    userid:user.userInfo.userinformation.id,
   }
   //编辑
axios.post('/address/update1',JSON.stringify(parmas)).then(res=>{
  if(res.code===200)
  {
    console.log('请求成功');
  }
})
this.form={}
  },
  remove(index){
    const user=useUserStore()
    if(this.MoRenaddress!=this.addressinformation[index].addressname){
    const parmas={
        id:this.addressinformation[index].id,
        userid:user.userInfo.userinformation.id,
    }
    // axios.post('/getaddress',JSON.stringify(parmas))
    //删除
    axios.post('/address/delete',JSON.stringify(parmas)).then(res=>{
      if(res.code===200){
        console.log('请求成功');
        console.log(parmas);
      }
    })
    this.addressinformation.splice(index,1)}
  },
  getaddressformation(){
    const user=useUserStore()
    axios.post('/personal/seladdress',JSON.stringify(user.userInfo.userinformation.id)).then(res=>{
      if(res.code===200){
        this.addressinformation=res.data
        console.log(this.addressinformation);
  this.length=this.addressinformation.length
  //找到默认地址
  for(let i=0;i<this.length;i++)
    {
      if(this.addressinformation[i].status===1)
      {
        this.MoRenaddress=this.addressinformation[i].addressname
      }
    }
      }
    })
  },
  setMoRenaddress(index){
    const user=useUserStore()
   let flag=0;
   //遍历找到上一个默认地址索引
    for(let i=0;i<this.length;i++)
    {
      if(this.addressinformation[i].status===1)
      {
      this.addressinformation[i].status=0
     flag=i
    }}
    console.log(flag);
    const parmas={
    lastid:this.addressinformation[flag].id,//上一个默认地址id
    id:this.addressinformation[index].id,//这一个默认地址id
    userid:user.userInfo.userinformation.id,
    addressee:this.addressinformation[index].addressee,
    addressname:this.addressinformation[index].addressname,
    phone:this.addressinformation[index].phone,
    status:0
    
    }
    axios.post('/address/update',JSON.stringify(parmas)).then(res=>{
      console.log(res);
    })
    this.MoRenaddress=this.addressinformation[index].addressname
    this.addressinformation[index].status=1
  }
},
mounted() {
  this.getaddressformation();
},

}
</script>

<style>
.MyAddress-header{
  height: 150px;
  background-color: white;
}
.MyAddress-banner{
 margin: 0 auto;
  width: 1300px;
  background-color: white;
}
.MyAddress-form{
  margin-top: 10px;
  margin-left: 47px;
  width: 1200px;
  height: 200px;
  background-color: white;
  border: 3px solid #66cdaa;
  border-radius: 5px;
}
</style>